<template>
  <div class="sdkSessionWindow">
    <styleSolt @saveFun="saveFun" :isShowSaveAs="isShowSaveAs">
      <template slot="content">
        <div class="previewOutBox">
          <header :style="{background: importType === 'appSdk' ? '#EEEEEE' : '#FFFFFF'}">
            <div class="headerTop">
              <span>9:41</span>
              <span class="V7_iconfont V7_iconV7tubiao_SDKdianchi fr"></span>
              <span class="V7_iconfont V7_iconV7tubiao_SDKWi-Fi fr"></span>
              <span class="V7_iconfont V7_iconV7tubiao_SDKxinhao fr"></span>
            </div>
            <div class="headerBottom">
              <div class="headerLeft fl" v-if="['appSdk'].includes(importType)">
                <div v-if="sessionWindowForm.leftTitleBtnText || sessionWindowForm.leftTitleBtnImgUrl">
                  <img :src="initConfig + sessionWindowForm.leftTitleBtnImgUrl" alt="" v-if="sessionWindowForm.leftTitleBtnImgUrl">
                  <span>{{sessionWindowForm.leftTitleBtnText}}</span>
                </div>
                <div v-else>
                  <span class="V7_iconfont V7_iconV7tubiao_zuo"></span>返回
                </div>
              </div>
              <div class="headerLeft fl" v-else style="width:80px">
                <span class="V7_iconfont V7_iconV7tubiao_zuo" style="color: #000000"></span>
              </div>
              <span class="fl title">{{sessionWindowForm.sdkTitleBarText || ''}}</span>
              <div v-if="['appSdk'].includes(importType)">
                <div v-if="sessionWindowForm.isTransferSeatsShow" class="fr headerLeft headerRight">
                  <div v-if="sessionWindowForm.transferSeatsBtnText || sessionWindowForm.transferSeatsBtnImgUrl">
                    <img :src="initConfig + sessionWindowForm.transferSeatsBtnImgUrl" alt="" v-if="sessionWindowForm.transferSeatsBtnImgUrl">
                    <span>{{sessionWindowForm.transferSeatsBtnText}}</span>
                  </div>
                  <div v-else>
                    <span class="V7_iconfont V7_iconV7tubiao_zixun"></span>人工客服
                  </div>
                </div>
              </div>
              <div v-else>
                <div class="wechatAppRight fr">
                  <span class="V7_iconfont V7_iconV7tubiao_xiaochengxu-gengduo"></span>
                  <span class="V7_iconfont V7_iconV7tubiao_xiaochengxu-guanbi"></span>
                </div>
              </div>
            </div>
          </header>
          <div class="container">
            <div style="background: #ffff;height: 32px" v-if="sessionWindowForm.topNoticeText"></div>
            <div v-if="sessionWindowForm.topNoticeText" class="topNotice"
              :style="{background: sessionWindowForm.sdkMainThemeColor}">
            </div>
            <div class="topNoticeMsg" v-if="sessionWindowForm.topNoticeText" :style="{color: sessionWindowForm.sdkMainThemeColor}">
              <span class="V7_iconfont V7_iconV7tubiao_SDKtongzhi"></span>
                {{sessionWindowForm.topNoticeText}}
              <span style="fontSize: 14px" class="fr V7_iconfont V7_iconV7tubiao_guanbi"></span>
            </div>
            <ul>
              <li class="system clearfix">
                <img :src="initConfig + sessionWindowForm.sysMsgHeadImgUrl" alt="" v-if="initConfig && sessionWindowForm.sysMsgHeadImgUrl" class="fl">
                <img v-else src="../../../../../assets/img/webchatSystem.png" class="fl">
                <span class="name">系统</span>
                <div class="msgItem fl" :style="{background: sessionWindowForm.leftMsgBgColor, color: sessionWindowForm.leftMsgTextColor}">
                  您好，人工客服在线时间是工作日9:00-19:00 我们将第一时间回复您的消息。
                </div>
              </li>
              <li class="in clearfix">
                <img src="../../../../../assets/img/visitorsHeadImg.png" alt="" class="fr">
                <span class="name fr">13:47:17</span>
                <div class="fr msgItem out" :style="{background: sessionWindowForm.rightMsgBgColor, color: sessionWindowForm.rightMsgTextColor}">
                  我想咨询云客服产品
                </div>
              </li>
            </ul>
          </div>
          <footer class="footer" :style="{height: importType === 'appSdk' ? '60px' : '95px'}">
            <div style="marginLeft: 10px" v-if="['wechatApp'].includes(importType)">
              <span :style="{border: `1px solid ${sessionWindowForm.sdkMainThemeColor}`}" class="actionBtn">人工客服</span>
              <span :style="{border: `1px solid ${sessionWindowForm.sdkMainThemeColor}`}" class="actionBtn">评价</span>
            </div>
            <span v-if="sessionWindowForm.isVoiceBtnShow && ['appSdk'].includes(importType)" class="funBtn">
              <img :src="initConfig + sessionWindowForm.isVoiceBtnImgUrl" alt="" v-if="sessionWindowForm.isVoiceBtnImgUrl">
              <span v-else class="V7_iconfont V7_iconV7tubiao_SDKyuyan"></span>
            </span>
            <span class="sendMsg" :style="{
              width: ['wechatApp'].includes(importType) ? 'calc(100% - 110px)': 'calc(100% - 160px)',
              marginLeft: ['wechatApp'].includes(importType) ? '15px': ''}">
              <span class="sendMsgContent">
                {{sessionWindowForm.inputViewHintText}}
              </span>
              <span v-if="sessionWindowForm.isEmojiBtnShow" class="fr emojiBtn">
                <img :src="initConfig + sessionWindowForm.isEmojiBtnImgUrl" alt="" v-if="sessionWindowForm.isEmojiBtnImgUrl">
                <span v-else class="V7_iconfont V7_iconV7tubiao_zaixian-biaoqing" style="color:#111111"></span>
              </span>
            </span>
            <span class="funBtn">
              <img :src="initConfig + sessionWindowForm.moreFunctionImgUrl" alt="" v-if="sessionWindowForm.moreFunctionImgUrl">
              <span v-else class="V7_iconfont V7_iconV7tubiao_xinzeng"></span>
            </span>
          </footer>
        </div>
      </template>
      <template slot="edit">
        <el-form class="m7-form sessionWindowForm"
          size="mini" :model="sessionWindowForm"
          ref="sessionWindowForm" label-position="top">
          <el-form-item label="主题色" prop="sdkMainThemeColor">
            <el-color-picker class="colorChoose" size="small" @change="colorChange($event, 'sdkMainThemeColor')"
              v-model="sessionWindowForm.sdkMainThemeColor"></el-color-picker>
            <el-input class="colorIpt" v-model.trim="sessionWindowForm.sdkMainThemeColor" :disabled="true" size="mini"></el-input>
          </el-form-item>
          <div class="clearfix">
            <el-form-item label="左气泡颜色" prop="leftMsgBgColor" class="leftFormItem fl">
              <el-color-picker class="colorChoose" size="small" @change="colorChange($event, 'leftMsgBgColor')"
                v-model="sessionWindowForm.leftMsgBgColor"></el-color-picker>
              <el-input class="colorIpt" v-model.trim="sessionWindowForm.leftMsgBgColor" :disabled="true" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="右气泡颜色" prop="rightMsgBgColor" class="fl">
              <el-color-picker class="colorChoose" size="small" @change="colorChange($event, 'rightMsgBgColor')"
                v-model="sessionWindowForm.rightMsgBgColor"></el-color-picker>
              <el-input class="colorIpt" v-model.trim="sessionWindowForm.rightMsgBgColor" :disabled="true" size="mini"></el-input>
            </el-form-item>
          </div>
          <div class="clearfix">
            <el-form-item label="左字体颜色" prop="leftMsgTextColor" class="leftFormItem fl">
              <el-color-picker class="colorChoose" size="small" @change="colorChange($event, 'leftMsgTextColor')"
                v-model="sessionWindowForm.leftMsgTextColor"></el-color-picker>
              <el-input class="colorIpt" v-model.trim="sessionWindowForm.leftMsgTextColor" :disabled="true" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="右字体颜色" prop="rightMsgTextColor" class="fl">
              <el-color-picker class="colorChoose" size="small" @change="colorChange($event, 'rightMsgTextColor')"
                v-model="sessionWindowForm.rightMsgTextColor"></el-color-picker>
              <el-input class="colorIpt" v-model.trim="sessionWindowForm.rightMsgTextColor" :disabled="true" size="mini"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="导航栏标题">
            <el-input :maxlength="6" v-model.trim="sessionWindowForm.sdkTitleBarText" size="mini" placeholder="导航栏标题，为空不展示，最多6个字符"></el-input>
          </el-form-item>
          <el-form-item label="左侧导航栏设置" v-if="['appSdk'].includes(importType)">
            <div v-if="sessionWindowForm.leftTitleBtnText || sessionWindowForm.leftTitleBtnImgUrl" @click="setMessageOrImg('leftTitle')" class="valueUrlBox">
              <img v-if="sessionWindowForm.leftTitleBtnImgUrl && initConfig" :src="initConfig + sessionWindowForm.leftTitleBtnImgUrl" />
              <span style="verticalAlign: middle">{{sessionWindowForm.leftTitleBtnText}}</span>
            </div>
            <div v-else class="defaultSetting" @click="setMessageOrImg('leftTitle')">
              <span class="V7_iconfont V7_iconV7tubiao_zuo"></span>返回
            </div>
          </el-form-item>
          <el-form-item label="右侧导航栏设置" v-if="['appSdk'].includes(importType)">
            <div class="closeSessionBox">
              <div v-if="sessionWindowForm.isCloseSeatsSessionShow">
                <div v-if="sessionWindowForm.closeSeatsSessionBtnText || sessionWindowForm.closeSeatsSessionBtnImgUrl"
                  class="valueUrlBox" @click="setMessageOrImg('closeSeats')">
                  <div class="closeBox" @click="closeBtn($event, 'closeSeats')">x</div>
                  <img v-if="sessionWindowForm.closeSeatsSessionBtnImgUrl && initConfig" :src="initConfig + sessionWindowForm.closeSeatsSessionBtnImgUrl" />
                  <span style="verticalAlign: middle">{{sessionWindowForm.closeSeatsSessionBtnText}}</span>
                </div>
                <div v-else class="defaultSetting" @click="setMessageOrImg('closeSeats')">
                  <span class="V7_iconfont V7_iconV7tubiao_tuichu"></span>结束
                  <div class="closeBox" @click="closeBtn($event, 'closeSeats')">x</div>
                </div>
              </div>
              <span v-else class="addBtn" @click="addBtn('isCloseSeatsSessionShow')">
                <i class="el-icon-plus"></i>添加结束按钮
              </span>
            </div>
            <div>
              <div v-if="sessionWindowForm.isTransferSeatsShow">
                <div v-if="sessionWindowForm.transferSeatsBtnText || sessionWindowForm.transferSeatsBtnImgUrl"
                  @click="setMessageOrImg('transferSeats')" class="valueUrlBox">
                  <div class="closeBox" @click="closeBtn($event, 'transferSeats')">x</div>
                  <img v-if="sessionWindowForm.transferSeatsBtnImgUrl && initConfig" :src="initConfig + sessionWindowForm.transferSeatsBtnImgUrl" />
                  <span>{{sessionWindowForm.transferSeatsBtnText}}</span>
                </div>
                <div v-else class="defaultSetting" @click="setMessageOrImg('transferSeats')">
                  <span class="V7_iconfont V7_iconV7tubiao_zixun"></span>人工客服
                  <div class="closeBox" @click="closeBtn($event, 'transferSeats')">x</div>
                </div>
              </div>
              <span v-else class="addBtn" @click="addBtn('isTransferSeatsShow')">
                <i class="el-icon-plus"></i>添加人工客服按钮
              </span>
            </div>
          </el-form-item>
          <el-form-item label="置顶公告">
            <el-input :maxlength="16" v-model.trim="sessionWindowForm.topNoticeText" size="mini" placeholder="置顶公告内容，为空不展示，最多16字符">
            </el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">
              系统消息头像
              <span class="adviceColor">（建议尺寸：120*120）</span>
            </span>
            <img class="agentImg" v-if="initConfig && sessionWindowForm.sysMsgHeadImgUrl" :src="initConfig + sessionWindowForm.sysMsgHeadImgUrl" alt="">
            <icon-svg :icon-class="'tupian'" class="agentImg" v-else></icon-svg>
            <el-upload
              class="upLoad"
              :show-file-list="false"
              accept=".jpg, .gif, .png, .bmp"
              action=""
              :on-success="systemUploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload"
              :http-request="uploadRequest">
              <span>上传图片</span>
            </el-upload>
            <span v-if="initConfig && sessionWindowForm.sysMsgHeadImgUrl">
              <span class="line"></span>
              <span class="delImg" @click="delSystemImgFun({imgUrl: sessionWindowForm.sysMsgHeadImgUrl, type: 'sysMsgHeadImgUrl'})">删除</span>
            </span>
            <el-select class="msgHeadSelect" size="mini" v-model="sessionWindowForm.msgHeadImgType" placeholder="请选择">
              <el-option label="圆角方形" :value="'rectangle'"></el-option>
              <el-option label="圆形" :value="'circular'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="输入框提示语">
            <el-input :maxlength="20" v-model.trim="sessionWindowForm.inputViewHintText" size="mini" placeholder="输入框提示语，最多20字符">
            </el-input>
          </el-form-item>
          <el-form-item label="输入框两侧按钮">
            <div class="closeSessionBox" v-if="['appSdk'].includes(importType)">
              <div v-if="sessionWindowForm.isVoiceBtnShow">
                <div v-if="sessionWindowForm.isVoiceBtnImgUrl" style="width: 100px" class="valueUrlBox" @click="setMessageOrImg('VoiceBtn')">
                  <div class="closeBox" @click="closeBtn($event, 'VoiceBtn')">x</div>
                  <img :src="initConfig + sessionWindowForm.isVoiceBtnImgUrl">
                </div>
                <div v-else class="defaultSetting" @click="setMessageOrImg('VoiceBtn')">
                  <span class="V7_iconfont V7_iconV7tubiao_SDKyuyan"></span>
                  <div class="closeBox" @click="closeBtn($event, 'VoiceBtn')">x</div>
                </div>
              </div>
              <span v-else class="addBtn" @click="addBtn('isVoiceBtnShow')">
                <i class="el-icon-plus"></i>添加语音按钮
              </span>
            </div>
            <div class="closeSessionBox">
              <div v-if="sessionWindowForm.isEmojiBtnShow" style="width: 100px" class="valueUrlBox">
                <div v-if="sessionWindowForm.isEmojiBtnImgUrl" @click="setMessageOrImg('EmojiBtn')">
                  <div class="closeBox" @click="closeBtn($event, 'EmojiBtn')">x</div>
                  <img :src="initConfig + sessionWindowForm.isEmojiBtnImgUrl">
                </div>
                <div v-else class="defaultSetting" @click="setMessageOrImg('EmojiBtn')">
                  <span class="V7_iconfont V7_iconV7tubiao_zaixian-biaoqing" style="color: #111"></span>
                  <div class="closeBox" @click="closeBtn($event, 'EmojiBtn')">x</div>
                </div>
              </div>
              <span v-else class="addBtn" @click="addBtn('isEmojiBtnShow')">
                <i class="el-icon-plus"></i>添加表情按钮
              </span>
            </div>
            <div class="defalutBox" @click="setMessageOrImg('moreFunBtn')">
              <div v-if="sessionWindowForm.moreFunctionImgUrl" style="width: 100px" class="valueUrlBox">
                <img :src="initConfig + sessionWindowForm.moreFunctionImgUrl">
              </div>
              <div class="defaultSetting" v-else>
                <span class="V7_iconfont V7_iconV7tubiao_xinzeng"></span>
              </div>
            </div>
            <div class="defalutBox" @click="setMessageOrImg('keyboardBtn')"  v-if="['appSdk'].includes(importType)">
              <div v-if="sessionWindowForm.showKeyboardImgUrl" style="width: 100px" class="valueUrlBox">
                <img :src="initConfig + sessionWindowForm.showKeyboardImgUrl">
              </div>
              <div class="defaultSetting" v-else>
                <span class="V7_iconfont V7_iconV7tubiao_SDKjianpan"></span>
              </div>
            </div>
            <div class="defalutBox"  @click="setMessageOrImg('sendMsgBtn')"  v-if="['appSdk'].includes(importType)">
              <div v-if="sessionWindowForm.sendMsgBtnImgUrl" style="width: 100px" class="valueUrlBox">
                <img :src="initConfig + sessionWindowForm.sendMsgBtnImgUrl">
              </div>
              <div class="defaultSetting" v-else>
                <span class="V7_iconfont V7_iconV7tubiao_fasong"></span>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="['wechatApp'].includes(importType)">
            <span slot="label">
              "+"扩展按钮
              <span class="adviceColor">（添加最多6个）</span>
            </span>
            <div v-for="(item, index) in sessionWindowForm.expandBtn" :key="index" class="expandBtnItem fl" @click="editExpandBtn(item, index)">
              <div class="closeBox" @click="closeExpandBtn($event, item, index)">x</div>
              <div class="expandImg">
                <img :src="initConfig + item.imgUrl" alt="" v-if="item.imgUrl">
              </div>
              <div class="moreName">{{item.name}}</div>
            </div>
            <div class="expandBtnItem fl addExpandBtn" v-if="sessionWindowForm.expandBtn.length < 6" @click="addExpandFun">
              <span class="V7_iconfont V7_iconV7tubiao_xinzeng"></span>
            </div>
          </el-form-item>
        </el-form>
      </template>
    </styleSolt>
    <setMessageOrImg
      v-if="isShowDialog"
      :btnObj="btnObj"
      :isShow="isShowDialog"
      :title="btnTitle"
      :initConfig="initConfig"
      :isShowDialogName="isShowDialogName"
      :isExpandBtn="isExpandBtn"
      @cancelFun="dialogCancelFun"
      @messageOrImgSave="messageOrImgSave"
    ></setMessageOrImg>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { uploadQiniu } from '@/utils/upload'
import { SdkSessionWindowForm, sessionWindowFormTem } from '@/views/config/webchat/channel/base/appSwinterface'
import styleSolt from '@/views/config/webchat/channel/base/styleSolt.vue'
import setMessageOrImg from '@/views/config/webchat/channel/base/setMessageOrImg.vue'
import { deepClone } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'sdkSessionWindow',
  components: { styleSolt, setMessageOrImg },
  filters: {
    filterIcon (type) {
      if (type === 'photo') {
        return 'V7_iconV7tubiao_xiaochengxu-tupian'
      } else if (type === 'shooting') {
        return 'V7_iconV7tubiao_xiaochengxu-paishe'
      }
    }
  }
})
export default class SdkSessionWindow extends Vue {
  @Prop({ type: Boolean, default: () => false }) private isShowSaveAs
  @Prop() private type: string | undefined
  private $store: any
  private $message: any
  private $confirm: any
  private $bus: any

  private fileName: string = ''

  public sessionWindowForm: SdkSessionWindowForm = {
    sdkMainThemeColor: '#008cee', // 主题色
    leftMsgBgColor: '#FFFFFF', // 左气泡颜色
    rightMsgBgColor: '#CEE6FC', // 右气泡颜色
    leftMsgTextColor: '#151515', // 左气泡文字颜色
    rightMsgTextColor: '#151515', // 右气泡文字颜色
    sdkTitleBarText: '', // 导航栏文字
    leftTitleBtnText: '返回', // 左侧导航栏文字
    leftTitleBtnImgUrl: '/4000343/im/20210617094344/1623894224660/1446f932b5c342f294d62ccec3869c23/%E8%BF%94%E5%9B%9E.png', // 左侧导航栏图片url
    isTransferSeatsShow: true, // 是否展示转人工按钮
    isCloseSeatsSessionShow: true, // 是否显示结束按钮
    transferSeatsBtnText: '转人工', // 转人工按钮文字
    transferSeatsBtnImgUrl: '/4000343/im/20210616171709/1623835029558/10b4bc7ed0a64b0abcfa591b9b9b8f97/%E4%BA%BA%E5%B7%A5%E5%AE%A2%E6%9C%8D.png', // 转人工按钮图片地址
    closeSeatsSessionBtnText: '结束', // 结束会话按钮文字
    closeSeatsSessionBtnImgUrl: '/4000343/im/20210616171720/1623835040990/b461dc1f591f4b80bc2b217e5b88ee80/%E7%BB%93%E6%9D%9F.png', // 结束会话按钮图片地址
    topNoticeText: '', // 公告文字
    sysMsgHeadImgUrl: '', // 系统消息头像地址
    msgHeadImgType: 'rectangle', // 系统头像样式 rectangle（圆角矩形） / circular（圆型）
    inputViewHintText: '', // 输入框提示语
    isVoiceBtnShow: true, // 是否展示语音按钮
    isVoiceBtnImgUrl: '', // 语音按钮图片地址
    isEmojiBtnShow: true, // 是否展示表情按钮
    isEmojiBtnImgUrl: '', // 表情按钮图片地址
    moreFunctionImgUrl: '', // 加号图片地址
    showKeyboardImgUrl: '', // 键盘图片地址
    sendMsgBtnImgUrl: '', // 发送按钮图片地址
    expandBtn: [ // 拓展按钮
      { name: '照片', imgUrl: '/4000345/im/20210705175148/1625478708527/8df2a53dcfe049d5ad2a1cfe27fd9908/wxsdkphoto.png', eventParame: 'photo', eventName: 'photo' },
      { name: '拍照', imgUrl: '/4000345/im/20210705175107/1625478667684/041f79b5facc4d77b58e2846c3bb5a84/wxsdkshooting.png', eventParame: 'shooting', eventName: 'shooting' }
    ]
  }

  private expandIndex: number = -1

  private btnTitle: string = '' // 按钮设置标题

  private isShowDialog: boolean = false // 是否显示设置弹窗

  private isExpandBtn: boolean = false // 是否展示自定义按钮弹窗

  private btnObj: any = {} // 按钮设置对象

  private isShowDialogName: boolean = true // 是否展示按钮样式弹窗文字

  private initConfig: string = ''

  private btnType: string = '' // 按钮类型

  get importType () {
    return this.type
  }

  private setSessionWindowData (data: SdkSessionWindowForm) {
    if (data) {
      this.sessionWindowForm = deepClone(data)
    } else {
      this.sessionWindowForm = deepClone(sessionWindowFormTem)
    }
  }

  private systemUploadSuccess (data: any) { // 系统头像上传成功
    this.sessionWindowForm.sysMsgHeadImgUrl = data.key ? `/${data.key}` : ''
  }

  private saveFun () { // 保存事件
    this.$emit('saveFun')
  }

  private uploadError () { // 上传失败
    this.$message({ message: '图片上传失败，请重新选择图片上传', type: 'error' })
  }

  private uploadRequest (request: any) { // 七牛上传
    uploadQiniu({ type: 'im', fileName: this.fileName }, request)
  }

  private beforeUpload (file: any) { // 图片上传之前
    this.fileName = file.name.replace(/\s/g, '')
    if (file.size / 1024 / 1024 > 3) {
      this.$message({ message: '头像大小不能超过3M', type: 'error' })
      return false
    }
    // 限制图片上传宽高。
    const isSize = new Promise<void>((resolve, reject) => {
      const url = window.URL || window.webkitURL
      const img = new Image()
      img.onload = () => {
        const valid = img.width >= 120 && img.height >= 120
        // eslint-disable-next-line prefer-promise-reject-errors
        valid ? resolve() : reject()
      }
      img.src = url.createObjectURL(file)
    }).then(() => {
      return file
    }, () => {
      this.$message.error('上传文件的图片大小不合符标准,宽需要大于120px，高需要大于120px')
      // eslint-disable-next-line prefer-promise-reject-errors
      return Promise.reject()
    })
    return isSize
  }

  private addExpandFun () {
    this.btnTitle = '添加自定义按钮'
    this.btnObj = {
      imgUrl: '/4000345/im/20210705175148/1625478708527/8df2a53dcfe049d5ad2a1cfe27fd9908/wxsdkphoto.png',
      name: '',
      eventParame: '',
      eventName: 'photo'
    }
    this.expandIndex = -1
    this.isShowDialog = true
    this.isExpandBtn = true
  }

  private delSystemImgFun (obj: any) {
    const sendData = { data: [{ key: obj.imgUrl, bucket: 'v7-fs-im' }] }
    const actionData = { url: '/base/action/qiniu/delete', method: 'POST', data: sendData }
    CommonModule.publicAction(actionData).then(res => {
      if (res && res.success) {
        this.sessionWindowForm[obj.type] = ''
      }
    })
  }

  private closeBtn ($event: any, type: string) { // 关闭按钮事件
    $event.stopPropagation()
    let title = ''
    switch (type) {
      case 'transferSeats':
        title = '人工客服'
        break
      case 'closeSeats':
        title = '结束'
        break
      case 'VoiceBtn':
        title = '语音'
        break
      case 'EmojiBtn':
        title = '表情'
        break
    }
    this.$confirm(`确定要关闭“${title}”功能吗？`, '提示', {
      confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
    }).then(() => {
      switch (type) {
        case 'transferSeats':
          this.sessionWindowForm.isTransferSeatsShow = false
          this.sessionWindowForm.transferSeatsBtnText = ''
          this.sessionWindowForm.transferSeatsBtnImgUrl = ''
          break
        case 'closeSeats':
          this.sessionWindowForm.isCloseSeatsSessionShow = false
          this.sessionWindowForm.closeSeatsSessionBtnText = ''
          this.sessionWindowForm.closeSeatsSessionBtnImgUrl = ''
          break
        case 'VoiceBtn':
          this.sessionWindowForm.isVoiceBtnShow = false
          this.sessionWindowForm.isVoiceBtnImgUrl = ''
          break
        case 'EmojiBtn':
          this.sessionWindowForm.isEmojiBtnShow = false
          this.sessionWindowForm.isEmojiBtnImgUrl = ''
          break
      }
      this.$message({ type: 'success', message: '关闭成功!' })
    }).catch(() => {
      this.$message({ type: 'info', message: '已取消关闭' })
    })
  }

  private closeExpandBtn ($event, obj: any, index: number) {
    $event.stopPropagation()
    this.$confirm(`确定要关闭“${obj.name}”功能吗？`, '提示', {
      confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
    }).then(() => {
      this.sessionWindowForm.expandBtn.splice(index, 1)
      this.$message({ type: 'success', message: '关闭成功!' })
    }).catch(() => {
      this.$message({ type: 'info', message: '已取消关闭' })
    })
  }

  private editExpandBtn (obj: any, index: number) {
    this.btnTitle = '添加自定义按钮'
    const { imgUrl, name, eventParame, eventName } = obj
    this.btnObj = {
      imgUrl, name, eventParame, eventName
    }
    this.expandIndex = index
    this.isExpandBtn = true
    this.isShowDialog = true
  }

  private setMessageOrImg (type: string) { // 按钮点击事件
    switch (type) {
      case 'leftTitle':
        this.btnTitle = '左侧导航栏设置'
        this.btnObj.name = this.sessionWindowForm.leftTitleBtnText
        this.btnObj.imgUrl = this.sessionWindowForm.leftTitleBtnImgUrl
        this.isShowDialogName = true
        break
      case 'transferSeats':
        this.btnTitle = '右侧导航栏设置- 人工客服'
        this.btnObj.name = this.sessionWindowForm.transferSeatsBtnText
        this.btnObj.imgUrl = this.sessionWindowForm.transferSeatsBtnImgUrl
        this.isShowDialogName = true
        break
      case 'closeSeats':
        this.btnTitle = '右侧导航栏设置-结束'
        this.btnObj.name = this.sessionWindowForm.closeSeatsSessionBtnText
        this.btnObj.imgUrl = this.sessionWindowForm.closeSeatsSessionBtnImgUrl
        this.isShowDialogName = true
        break
      case 'VoiceBtn':
        this.btnTitle = '输入框两侧按钮-声音'
        this.btnObj.imgUrl = this.sessionWindowForm.isVoiceBtnImgUrl
        this.isShowDialogName = false
        break
      case 'EmojiBtn':
        this.btnTitle = '输入框两侧按钮-表情'
        this.btnObj.imgUrl = this.sessionWindowForm.isEmojiBtnImgUrl
        this.isShowDialogName = false
        break
      case 'moreFunBtn':
        this.btnTitle = '输入框两侧按钮-更多按钮'
        this.btnObj.imgUrl = this.sessionWindowForm.moreFunctionImgUrl
        this.isShowDialogName = false
        break
      case 'keyboardBtn':
        this.btnTitle = '输入框两侧按钮-键盘'
        this.btnObj.imgUrl = this.sessionWindowForm.showKeyboardImgUrl
        this.isShowDialogName = false
        break
      case 'sendMsgBtn' :
        this.btnTitle = '输入框两侧按钮-发送按钮'
        this.btnObj.imgUrl = this.sessionWindowForm.sendMsgBtnImgUrl
        this.isShowDialogName = false
        break
    }
    this.isExpandBtn = false
    this.btnType = type
    this.isShowDialog = true
  }

  private messageOrImgSave (obj: any) {
    const { name, imgUrl, eventParame, eventName } = obj
    if (this.isExpandBtn) {
      if (this.expandIndex === -1) {
        this.sessionWindowForm.expandBtn.unshift({ name, imgUrl, eventName, eventParame })
      } else {
        this.sessionWindowForm.expandBtn[this.expandIndex] = {
          name, imgUrl, eventName, eventParame
        }
      }
    } else {
      switch (this.btnType) {
        case 'leftTitle':
          this.sessionWindowForm.leftTitleBtnText = name
          this.sessionWindowForm.leftTitleBtnImgUrl = imgUrl
          break
        case 'transferSeats':
          this.sessionWindowForm.transferSeatsBtnText = name
          this.sessionWindowForm.transferSeatsBtnImgUrl = imgUrl
          break
        case 'closeSeats':
          this.sessionWindowForm.closeSeatsSessionBtnText = name
          this.sessionWindowForm.closeSeatsSessionBtnImgUrl = imgUrl
          break
        case 'VoiceBtn':
          this.sessionWindowForm.isVoiceBtnImgUrl = imgUrl
          break
        case 'EmojiBtn':
          this.sessionWindowForm.isEmojiBtnImgUrl = imgUrl
          break
        case 'moreFunBtn':
          this.sessionWindowForm.moreFunctionImgUrl = imgUrl
          break
        case 'keyboardBtn':
          this.sessionWindowForm.showKeyboardImgUrl = imgUrl
          break
        case 'sendMsgBtn' :
          this.sessionWindowForm.sendMsgBtnImgUrl = imgUrl
          break
      }
    }
    this.isShowDialog = false
  }

  private dialogCancelFun () {
    this.isShowDialog = false
  }

  private addBtn (type: string) { // 添加按钮事件
    this.isExpandBtn = false
    switch (type) {
      case 'isCloseSeatsSessionShow':
        this.sessionWindowForm.closeSeatsSessionBtnText = '结束'
        this.sessionWindowForm.closeSeatsSessionBtnImgUrl = '/4000343/im/20210616171720/1623835040990/b461dc1f591f4b80bc2b217e5b88ee80/%E7%BB%93%E6%9D%9F.png'
        break
      case 'isTransferSeatsShow':
        this.sessionWindowForm.transferSeatsBtnText = '转人工'
        this.sessionWindowForm.transferSeatsBtnImgUrl = '/4000343/im/20210616171709/1623835029558/10b4bc7ed0a64b0abcfa591b9b9b8f97/%E4%BA%BA%E5%B7%A5%E5%AE%A2%E6%9C%8D.png'
        break
    }
    this.sessionWindowForm[type] = true
  }

  private colorChange (val: string, type: string) { // 颜色选择器
    if (val === null) {
      switch (type) {
        case 'sdkMainThemeColor':
          this.sessionWindowForm[type] = '#008BEE'
          break
        case 'leftMsgBgColor':
          this.sessionWindowForm[type] = '#F0F0F0'
          break
        case 'rightMsgBgColor':
          this.sessionWindowForm[type] = '#CEE6FC'
          break
        case 'leftMsgTextColor':
          this.sessionWindowForm[type] = '#151515'
          break
        case 'rightMsgTextColor':
          this.sessionWindowForm[type] = '#151515'
          break
      }
    }
  }

  private mounted () {
    const config = this.$store.state.common.initConfig
    this.initConfig = config ? config.qiniuDomainMap.im : ''
    this.$bus.$on('sdkEdit', (row: any) => {
      this.setSessionWindowData(row)
    })
  }

  private beforeDestroy () {
    this.$bus.$off('sdkEdit')
  }
}
</script>
<style lang="stylus" scoped>
  .sdkSessionWindow
    height 100%
    .previewOutBox
      width calc(100% - 360px)
      max-width 420px
      margin 20px auto
      border-radius 10px
      height calc(100% - 40px)
      display flex
      flex-direction column
      border 1px solid $border-main
      justify-content center
      header
        border-radius 10px 10px 0px 0px
        .headerTop
          height 26px
          padding 6px
          span
            font-size 12px
            margin-right 2px
        .headerBottom
          clear both
          overflow hidden
          line-height 30px
          height 50px
          padding 10px
          text-align center
          .headerLeft
            width 90px
            color $c-main
            text-align left
            span
              font-size 12px
              color $c-main
              vertical-align middle
            img
              width 18px
              margin-right 5px
              height 18px
              vertical-align middle
          .headerRight
            text-align right
          .title
            width calc(100% - 180px)
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            font-size 14px
        .wechatAppRight
          text-align center
          border 1px solid $border-main
          border-radius 12px
          width 60px
          height 24px
          line-height 24px
          .V7_iconfont
            font-size 20px
          .V7_iconV7tubiao_xiaochengxu-gengduo
            border-right 1px solid $border-main
            margin-right 4px
            padding-right 4px
            display inline-block
      .container
        background #EEEEEE
        height calc(100% - 120px)
        overflow-y auto
        position relative
        .topNotice
          height 32px
          opacity 0.1
          line-height 32px
          position absolute
          top 0px
          width 100%
        .topNoticeMsg
          padding 0px 10px
          width 100%
          position absolute
          top 10px
          .V7_iconV7tubiao_SDKtongzhi
            vertical-align middle
            margin-right 10px
        ul
          padding 14px 10px 10px
          li
            img
              width 30px
              height 30px
              border-radius 50%
            .name
              margin 0px 10px
              color #666666
            .msgItem
              padding 10px
              margin 10px 10px 14px 10px
              line-height 20px
              border-radius 10px
              width calc(100% - 50px)
            .out
              width 130px
              margin-right -54px
              margin-top 20px
              text-align right
      .footer
        height 60px
        background #F5F5F5
        border-radius 0px 0px 10px 10px
        .funBtn
          width 30px
          margin  16px 14px 16px 16px
          display inline-block
          line-height 30px
          text-align center
          height 30px
          border-radius 50%
          vertical-align middle
          background #fff
          .V7_iconfont
            font-size 14px
          img
            width 100%
            height 100%
            border-radius 50%
        .sendMsg
          margin-top -2px
          vertical-align middle
          width calc(100% - 160px)
          border-radius 20px
          height 40px
          line-height 40px
          color #B3B9C7
          font-size 12px
          padding 0 10px 0px 20px
          background #FEFEFE
          display inline-block
          .sendMsgContent
            width calc(100% - 50px)
            white-space nowrap
            overflow hidden
            display inline-block
            text-overflow ellipsis
          .V7_iconfont
            font-size 20px
          .emojiBtn
            width 20px
            height 20px
            img
              height 100%
              width 100%
              border-radius 50%
        .actionBtn
          padding 4px 8px
          margin 6px
          display inline-block
          // border 1px solid #008BEE
          border-radius 12px
    .sessionWindowForm
      .colorIpt
        display inline-block
        width 80px
        margin-left 10px
        vertical-align middle
      .colorChoose
        vertical-align middle
      .leftFormItem
        margin-right 10px
      .defaultSetting
        width 100px
        position relative
        height 32px
        line-height 32px
        text-align center
        background #F8FAFD
        border-radius 4px
        font-size 12px
        color $c-main
        cursor pointer
        .V7_iconfont
          font-size 12px
          margin-right 5px
      .agentImg
        border-radius 50%
        display inline-block
        vertical-align middle
        width 40px
        height 40px
        margin-bottom 5px
      .agentImg.V7_iconfont
        font-size 40px
        color #008BEE
        line-height 40px
        vertical-align middle
      .upLoad
        display inline-block
        margin 0px 10px
        span
          font-size 12px
          color #008BEE
      .V7_iconV7tubiao_SDKyuyan,.V7_iconV7tubiao_zaixian-biaoqing,.V7_iconV7tubiao_SDKjianpan,.V7_iconV7tubiao_fasong,.V7_iconV7tubiao_xinzeng
        color #111111
      .closeSessionBox
        margin-bottom 10px
      .defalutBox
        width 100px
        margin-bottom 10px
      .closeBox
        position absolute
        line-height 0px
        padding 7px 0px 0px 4px
        color #fff
        right 0px
        top 0px
        width 17px
        height 17px
        background #FC6B5C
        border-radius 1% 0 0px 20px
        display none
      .valueUrlBox
        position relative
        width 130px
        background #F8FAFD
        text-align center
        cursor pointer
        img
          width 18px
          height 18px
          margin-right 5px
          border-radius 4px
          vertical-align middle
        span
          font-size 12px
          color $c-main
          display inline-block
      .defaultSetting:hover .closeBox
        display block
      .valueUrlBox:hover .closeBox
        display block
      .addBtn
        cursor pointer
        height 32px
        line-height 32px
        background #FFFFFF
        padding 6px 30px
        font-size 12px
        border 1px solid $border-main
        border-radius 4px
        color $c-main
      .delImg
        font-size 12px
        color #FC6B5C
        margin 0px 9px
        display inline-block
        cursor pointer
      .adviceColor
        color #767E91
      .line
        width 1px
        height 9px
        background #008BEE
        opacity 0.3
        display inline-block
      .expandBtnItem:hover .closeBox
        display block
      .expandBtnItem
        position relative
        width 80px
        text-align center
        height 80px
        line-height 40px
        background #F6F6F6
        border-radius 4px
        margin-right 5px
        margin-bottom 10px
        cursor pointer
        .expandImg
          width 40px
          height 40px
          padding 8px
          margin 10px 0px 0px 20px
          background #ffffff
          border-radius 4px
          img
            width 100%
            height 100%
            border-radius 4px
      .addExpandBtn
        background #ffffff
        border 1px solid $border-main
        line-height 80px
        .V7_iconfont
          color #A6A6AE
      .moreName
        font-size 12px
        color #303753
        margin-top -5px
</style>
<style lang="stylus">
.sdkSessionWindow
  .el-color-picker__trigger
    border 1px solid $border-main
  .msgHeadSelect
    width 100px
</style>
